<template>
    <div id="Article">
        <!-- 导航栏部分 -->
        <webNavi/>
        <!-- 滚动标语部分 -->
        <div class="slogan"></div>
        <!-- 版心部分 -->
        <div class="web-container">
            <!-- 用户信息部分 -->
            <div id="sticky-area">
                <userArea/>
            </div>

            <!-- 文章展示部分 -->
           <articleShow/>

            <!-- 回复展示 -->
            <!-- <div class="reply-show"></div> -->
            <!-- 用户回复 -->
            <!-- <div class="user-reply"></div> -->

            <div id="sticky-area">
                <!-- 文章推荐部分 -->
                <articlePush/>
                <!-- 文章标签 -->
                <articleLabel/>
            </div>
        </div>
        <!-- 页脚部分 -->
        <div class="web-footer"></div>
    </div>
</template>

<script>

import webNavi from '../components/webNavi.vue';
import userArea from '../components/userArea';
import articleShow from '../components/article-show';
import articlePush from '../components/article-push ';
import articleLabel from '../components/article-label.vue';

export default {
    name: "Article",
    components:{
        webNavi,
        userArea,
        articleShow,
        articlePush,
        articleLabel
    },
}
</script>

<style lang="scss" scoped>
#Article {
    background-color: #f6f6f6;
    a {
        text-decoration: none;
        color: #000;
    }
    hr {
        width: 90%;
        margin-top: 0;
    }
    #sticky-area {
        position: sticky;
        top: 1em;
    }
   
    .slogan {
        width: 800px;
        height: 20px;
        margin-bottom: 20px;
    }
    .web-container {
        width: 85%;
        height: 1000px;
        // border: 1px solid blue;
        margin: auto;
    }
}
</style>
